<template>
	<view class="content">
		<view class="miniBox" v-if="buttonFlag" @click="showBigBox">
			<image style="width: 50rpx;height: 90rpx; border-radius: 15rpx 0 0 15rpx;"
				src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/zuojiantou.png" mode=""></image>
		</view>
		<view class="BigBox" v-else>
			<view style="display: flex;box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;">
				<image @click.stop="showMini"
					style="width: 40rpx;height: 90rpx; border-radius: 15rpx 0 0 15rpx; position: absolute; left: -13%; z-index: 999;"
					src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/youjiantou.png" mode=""></image>
				<view style="height: 90rpx; width: 150rpx; background-color: #fff;">
					<image style="width: 70rpx;height: 70rpx; margin-left: 40rpx; margin-top: 10rpx;" @click="syncCheck"
						src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/shuaxin.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "syncButton",
		data() {
			return {
				buttonFlag: true,
			}
		},
		methods: {
			showBigBox() {
				this.buttonFlag = false
				console.log(123)
			},
			showMini() {
				console.log(123)
				this.buttonFlag = true
			},
		}
	}
</script>

<style>
	.miniBox {
		position: fixed;
		right: 0;
		z-index: 999999;
		top: 40%;
	}

	.BigBox {
		position: fixed;
		right: -3%;
		z-index: 999999;
		top: 40%;
	}
</style>